<template>
  <el-dialog v-if="dialog" width="55%" title="员工选择" custom-class="out-dialog" :close-on-click-modal="false" append-to-body :visible.sync="dialog">
    <div class="card-list">
      <el-card shadow="never" class="bunk-info-info-container">
        <div class="bunk-info-container">
          <div class="left-container">
            <el-card shadow="never" class="bunk-info-list-card">
              <el-tree
                ref="tree"
                :data="departmentTreeList"
                :props="defaultProps"
                highlight-current
                :check-on-click-node="true"
                :expand-on-click-node="false"
                default-expand-all
                node-key="id"
                :current-node-key="currentNodekey"
                @node-click="handleNodeClick"
              />
            </el-card>
          </div>
          <div class="right-container">
            <el-card shadow="never" class="selectCard searchColumn">
              <el-form label-position="right" label-width="6rem">
                <el-row :gutter="40">
                  <el-col :span="16">
                    <el-form-item label="员工名称：">
                      <el-input v-model="searchParams.nameCn" placeholder="请输入" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" style="float: right;">
                    <search-button :default-params="searchParams" @refreshParams="refreshParams" @getList="getEmployeeList1" />
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <el-card shadow="never" class="commercia-tenant-list-title tableCard">
              <vxe-table
                ref="xTree"
                border
                stripe
                resizable
                highlight-hover-row
                :loading="loading"
                :auto-resize="true"
                :data="employeeList"
                height="350"
                :print-config="{}"
                header-align="center"
                :checkbox-config="{checkRowKeys: checkList, checkStrictly: false}"
                @checkbox-all="selectAll"
                @checkbox-change="selectChangeEvent"
              >
                <vxe-table-column type="checkbox" width="50" align="center" title=" " />
                <vxe-table-column field="employeeName" title="员工名称" min-width="120" />
                <vxe-table-column field="mainDepartmentName" title="所属部门" min-width="160" />
                <vxe-table-column field="statusDesc" title="员工状态" min-width="120" />
              </vxe-table>
              <vxe-pager
                :current-page.sync="pageNum"
                :page-size.sync="pageSize"
                :total="total"
                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
                @page-change="getEmployeeList"
              />
            </el-card>
          </div>
        </div>
      </el-card>
    </div>
    <div class="footer-container">
      <div slot="footer" class="dialog-footer" style="justify-content: right; float: right;">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="clickSure">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getDepartmentTreeList, getEmployeePageList } from '@/api/cop/contact'
import SearchButton from '@/components/SearchButton'

export default {
  components: {
    SearchButton
  },
  props: {
    chooseList: {
      required: false,
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkList: [],
      checked: false,
      checkedNum: 0,
      active: 1,
      dialog: false,
      currentNodekey: '1',
      searchParams: {
        mainDepartmentId: '1',
        nameCn: ''
      },
      pageNum: 1,
      pageSize: 20,
      total: 1,
      employeeList: [],
      departmentTreeList: [],
      selectList: [],
      props: {
        children: 'children',
        value: 'id',
        label: 'nameCn',
        emitPath: false
      },
      defaultProps: {
        children: 'children',
        label: 'nameCn',
        value: 'id'
      }
    }
  },
  watch: {
    dialog(val) {
      if (val) {
        this.getDepartmentList()
      }
    }
  },
  methods: {
    selectTag(tag) {
      if (tag.checked === 0) {
        tag.checked = 1
        this.checkList.push(tag)
      } else {
        tag.checked = 0
        let i = -1
        this.checkList = JSON.parse(JSON.stringify(this.checkList))
        this.checkList.foreach((item, index) => {
          alert(index)
          if (item.id === tag.id) {
            i = index
          }
        })
        this.checkList.splice(i, 1)
      }
    },
    refreshParams(params) {
      params.mainDepartmentId = this.searchParams.mainDepartmentId
      this.searchParams = params
      this.getEmployeeList()
    },
    handleNodeClick(data) {
      this.searchParams.mainDepartmentId = data.id
      this.searchParams.pageNum = 1
      this.getEmployeeList()
    },
    getDepartmentList() {
      getDepartmentTreeList({ parentId: '0' })
        .then(res => {
          if (res) {
            this.departmentTreeList = res
            this.$nextTick(() => {
              this.getEmployeeList()
            })
          }
        }).catch((err) => {
          console.log(err)
        })
    },
    getEmployeeList1() {
      this.searchParams.pageNum = 1
      this.getEmployeeList()
    },
    getEmployeeList() {
      getEmployeePageList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams
      }).then(res => {
        this.employeeList = JSON.parse(JSON.stringify(res.records))
        this.total = res.total
      })
    },
    selectAll(e) {
      if (e.checked) {
        this.checkList.push(...e.records.map(item => item.id))
        this.checkList = Array.from(new Set(this.checkList))
        this.checkedNum = this.checkList.length
      } else {
        const arr = this.employeeList.map(item => item.id)
        const arr1 = []
        this.checkList.forEach((item, index) => {
          arr.forEach(it => {
            if (item === it) {
              arr1.push(index)
            }
          })
        })
        arr1.reverse().forEach(item => {
          this.checkList.splice(item, 1)
        })
      }
      this.checkedNum = this.checkList.length
    },
    selectChangeEvent(row) {
      let i = -1
      this.checkList.forEach((item, index) => {
        if (item === row.row.id) {
          i = index
        }
      })
      if (i === -1) {
        this.checkList.push(row.row.id)
      } else {
        this.checkList.splice(i, 1)
      }
      this.checkedNum = this.checkList.length
    },
    clickSure() {
      if (!this.$refs.xTree.getCheckboxRecords()) {
        this.$message.error('请选择至少一条记录')
        return false
      }

      this.$emit('getSelectedRecords', this.$refs.xTree.getCheckboxRecords())
      this.dialog = false
    }
  }
}
</script>

<style lang="scss">
.card-list {
  width: 100%;
}
  .bunk-info-info-container {
    width: 100%;
  }
  .bunk-info-container {
    display: flex;
    .left-container {
      margin-right: 20px;
      .bunk-info-list-card {
        height: 100%;
        width: 200px;
      }
    }
    .right-container {
      width: calc(100% - 200px);
      .commercia-tenant-list-title {
        margin-bottom: 20px;
        .el-card__body {
          padding:  0;
        }
      }
    }
    .logoImg {
      width: 50px;
      height: 50px;
    }
  }
.out-dialog {
  width: 900px;
}
.footer-container{
   >div{
      display: inline-flex;
     &:first-child{
         padding: 10px;
         cursor: pointer;
         margin-left: 10px;
         font-size: 10px;
         &::before{
           font-size: 40px;
           justify-content: center;
           color: #fff;
         }
       }
       &:last-child{
         cursor: pointer;
         justify-content: right;
         float: right;
         font-size: 14px;
       }
   }
}
</style>
